<!DOCTYPE html>
<html>
<head>
    <title>demo展示</title>
<#include "/modules/sys/header.ftl">
    <link rel="stylesheet" href="${siteurl}/css/demo.css?_${.now?long?c}">
</head>
<body>
<div id="rrapp" v-cloak>
    <div class="demo-left">
        各种弹窗
    </div>
    <div class="demo-right">
        <div>
            <button class="layui-btn" @click="layerAlertOne" type="button">提示弹窗</button>
            <p>可以用于提示语句的展示</p>
            <pre>
                layer.alert('提示信息');
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerAlertTwoSuccess" type="button">成功提示</button>
            <button class="layui-btn" @click="layerAlertTwoFail" type="button">失败提示</button>
            <button class="layui-btn" @click="layerAlertTwoWarning" type="button">警告提示</button>
            <pre>
                layer.alert('提示信息',{icon: 1});
                layer.alert('提示信息',{icon: 2});
                layer.alert('提示信息',{icon: 0});
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerAlertThree" type="button">点击确定有交互</button>
            <pre>
                layer.alert('提示信息',{icon: 1}, function(index){
                    //do something
                    console.log('点击了确定')
                    layer.close(index);
                });
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerConfirmOne" type="button">询问式，有取消</button>
            <p>可以用于删除时的</p>
            <pre>
                layer.confirm('确定删除？', {icon: 3, title:'提示'}, function(index){
                    //do something
                    console.log('确定');
                    layer.close(index);
                })
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerMsgOne" type="button">提示</button>
            <button class="layui-btn" @click="layerMsgTwo" type="button">有图标提示</button>
		<#--<button class="layui-btn" @click="layerMsgThree" type="button">关闭回调提示</button>-->
            <button class="layui-btn" @click="layerMsgFour" type="button">两秒之后关闭提示</button>
            <span>如果不设置时间，默认为3s</span>
            <pre>
                layer.msg('只想弱弱提示');
                layer.msg('有表情地提示', {icon: 6});
                layer.msg('自动关闭', {
                    icon: 4,
                    time: 2000 //2秒关闭（如果不配置，默认是3秒）
                });
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerLoadOne" type="button">加载层</button>
            <button class="layui-btn" @click="layerLoadTwo" type="button">加载层2</button>
            <button class="layui-btn" @click="layerLoadThree" type="button">加载层3</button>
            <pre>
                var index = layer.load();
                var index = layer.load(1);
                var index = layer.load(2, {time: 10*1000});

                关闭：
                layer.close(index);
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerOpenOne" type="button">真正意义上的弹窗</button>
            <pre>
                layer.open({
                    type: 1,
                    title: "弹窗标题",
                    area: ["80%", "70%"],
                    content: $("#layer")
                });
            </pre>
        </div>
        <div>
            <button class="layui-btn" @click="layerOpenTwo" type="button">可大可小的弹窗</button>
            <span>maxmin:true 可以实现弹窗的放大，缩小</span>
            <pre>
                layer.open({
                    type: 1,
                    title: "弹窗标题",
                    maxmin:true,
                    area: ["80%", "70%"],
                    content: $("#layer")
                });
            </pre>
        </div>
        <div id="layer" style="display: none">
            这里可以写任何东西，表单，表格，信息展示，随你开心。
        </div>
        <div>
            <button class="layui-btn" @click="layerOpenThree" type="button">带有按钮的弹窗</button>
            <pre>
                layer.open({
                    type: 1,
                    title: "弹窗标题",
                    maxmin:true,
                    area: ["80%", "70%"],
                    content: $("#layer1"),
                    btn: ['确定', '取消','重置'],
                    yes: function(index, layero){
                        console.log('确定回调')
                    },
                    btn2: function(index, layero){
                        console.log('取消回调')
                    },
                    btn3: function(index, layero){
                        $.formReset('myform');
                        return false;
                    },
                    cancel: function(){
                        console.log('右上角回调')
                    }
                });
            </pre>
        </div>
        <div id="layer1" style="display: none">
            <form id="myform">
                <input type="text">
            </form>
        </div>
        <div>
            <p>还有一种弹窗，是可以引入iframe的，引入iframe之后，里边的页面就不受控制了，什么jsp,html 都可以</p>
            <p>与上边不同的是，此时 type 为 2 ，然后content 是对应的路径</p>
            <pre>
                layer.open({
                    type: 2,
                    title: "弹窗标题",
                    maxmin:true,
                    area: ["80%", "70%"],
                    content: 'url'
                });
            </pre>
        </div>
    </div>
</div>

<script src="${siteurl}/js/sys/demo.js?_${.now?long?c}"></script>
</body>
</html>